<template>
	<n-popover v-model:show="show" trigger="click" placement="bottom-start" :show-arrow="false">
		<template #trigger>
			<div
				class="h-8 rounded-full px-3 flex items-center app-bg-react text-sm"
				:class="show ? 'bg-primary text-white' : 'bg-bg-3 text-t-2'">
				<base-icon
					class="duration-300"
					size="18"
					:class="{ 'rotate-90': show }"
					name="menu"></base-icon>
				<div>{{ total }}</div>
			</div>
		</template>
		<div class="w-[350px] max-h-[350px] bg-bg-8 rounded-sm overflow-auto">
			<sports-single-nav-menu
				:data="item"
				v-for="item in regionList"
				:key="item.regionId"
				@select="onSelect"></sports-single-nav-menu>
		</div>
	</n-popover>
</template>

<script lang="ts" setup>
import SportsSingleNavMenu from './sports-single-nav-menu.vue'
import { NPopover } from 'naive-ui'
import { BaseIcon } from '@/components/base'
import { RegionType } from '@/types'
import { PropType, ref, computed } from 'vue'

const props = defineProps({
	regionList: {
		type: Array as PropType<Array<RegionType>>,
		required: true
	}
})

const total = computed(() => {
	let res = 0
	props.regionList.forEach(({ leagues }) => {
		res += leagues.length
	})
	return res
})

const emits = defineEmits(['select'])

const show = ref(false)

const onSelect = (leagueId: string) => {
	emits('select', leagueId)
	show.value = false
}
</script>
